<template>
    <div>
        <el-row :gutter="20">
          <el-col :span="6"><el-button type="primary"  @click="dialogFormVisible=true">添加</el-button></el-col>
          <!--<el-col :span="6"><el-input  placeholder="请输入内容" v-model="input"></el-input></el-col>-->
            <!--<el-button icon="el-icon-search" @click="getOneUser" circle></el-button>-->
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index"  label="序号"> </el-table-column>
            <el-table-column prop="userName" label="账号" width="180"> </el-table-column>
            <el-table-column prop="userPwd" label="密码"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button  v-if="!scope.row.controller" size="mini"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button  v-if="!scope.row.controller" size="mini" type="warning" @click="freezeUser(scope.$index, scope.row)">{{scope.row.freeze ? "已冻结" : "冻结"}}</el-button>
                    <el-button  v-if="!scope.row.controller" size="mini" type="danger" @click="delUser(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :visible.sync="dialogFormVisible" label-width="80px">
            <h3 class="title">添加用户</h3>
            <el-form  :model="addForm" :rules="rules" ref="addForm" >
                <el-form-item prop="account" label="账号" :label-width="formLabelWidth">
                    <el-input type="text" v-model="addForm.account" auto-complete="off" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item prop="pwd" label="密码" :label-width="formLabelWidth">
                    <el-input type="password" v-model="addForm.pwd" auto-complete="off" placeholder="确认密码"></el-input>
                </el-form-item>
                <el-form-item label="页面权限" :label-width="formLabelWidth" prop="authority">
                  <el-checkbox-group v-model="addForm.authority">
                    <el-checkbox label="报表中心" name="chart"></el-checkbox>
                    <el-checkbox label="店铺装修" name="shop"></el-checkbox>
                    <el-checkbox label="商品中心" name="goods"></el-checkbox>
                    <el-checkbox label="订单中心" name="order"></el-checkbox>
                    <el-checkbox label="物流中心" name="logistics"></el-checkbox>
                    <el-checkbox label="用户管理" name="users"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible=false">取 消</el-button>
                <el-button type="primary" @click.native.prevent="addList">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"  >
            <span>{{tips}}</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="edituserVisible">
            <h3 class="title">修改用户</h3>
            <el-form  :model="editForm" :rules="editrules" ref="editForm" >
              <el-form-item prop="account" :label-width="formLabelWidth">
                <el-input type="text" v-model="editForm.account" auto-complete="off" placeholder="账号"></el-input>
              </el-form-item>
              <el-form-item prop="pwd" :label-width="formLabelWidth">
                <el-input type="password" v-model="editForm.pwd" auto-complete="off" placeholder="确认密码"></el-input>
              </el-form-item>
              <el-form-item label="页面权限" :label-width="formLabelWidth" prop="authority">
                <el-checkbox-group v-model="editForm.authority">
                  <el-checkbox label="报表中心" name="chart"></el-checkbox>
                  <el-checkbox label="店铺装修" name="shop"></el-checkbox>
                  <el-checkbox label="商品中心" name="goods"></el-checkbox>
                  <el-checkbox label="订单中心" name="order"></el-checkbox>
                  <el-checkbox label="物流中心" name="logistics"></el-checkbox>
                  <el-checkbox label="用户管理" name="users"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="edituserVisible = false">取 消</el-button>
              <el-button type="primary" @click.native.prevent="edituser">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import axios from "axios"

  export default {
      data() {
          return {
              tableData: [],
              formLabelWidth: '100px',
              dialogFormVisible:false,
              dialogVisible:false,
              edituserVisible:false,
              tips:"",
              input:"",
              addForm: {
                  account: '',
                  pwd: '',
                  authority:[]
              },
              editForm: {
                account: '',
                pwd: '',
                authority:[],
                id:""
              },
              rules: {
                  account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    //{ validator: validaePass }
                  ],
                  pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    //{ validator: validaePass2 }
                  ],
                  authority: [
                    { type: 'array', required: true, message: '请至少选择一个权限', trigger: 'change' }
                  ],
              },
            editrules: {
              account: [
                { required: true, message: '请输入账号', trigger: 'blur' },
                //{ validator: validaePass }
              ],
              pwd: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                //{ validator: validaePass2 }
              ],
              authority: [
                { type: 'array', required: true, message: '请至少选择一个权限', trigger: 'change' }
              ],
            },
              message:""
          }
      },
      mounted(){
        this.getGoodsList();
      },
      methods:{
          open() {
            this.$message(this.message);
          },
          getGoodsList(flag) {
              // var param = {
              //   page: this.page,
              //   pageSize: this.pageSize,
              //   sort: this.sortFlag ? 1 : -1
              // }
              axios.get("/users/userList", {
                // params: param
              }).then((response) => {
                let res = response.data;
                if (res.status == "0") {
                  this.tableData = res.result.list;
                }
              })
          },
          addList(){
              this.$refs.addForm.validate((valid) => {
                  if (valid) {
                      //_this.$router.replace('/table');
                      this.logining = true;
                      //NProgress.start();
                      axios.post("/users/addUser",{
                          username: this.addForm.account,
                          password: this.addForm.pwd,
                          authority: this.addForm.authority
                      }).then((ress)=>{
                          let res = ress.data;
                          if(res.status == "2"){
                            this.message = "用户名已存在"
                            this.open()
                          }
                          if(res.status == "0"){
                            this.message = "注册成功"
                            this.open()
                            this.getGoodsList();
                            this.dialogFormVisible = false;
                          }
                      })
                  } else {
                      console.log('error submit!!');
                      return false;
                  }
              });
          },
          freezeUser(int,row){
            axios.post("/users/freezeUser", {
              id:row._id,
              freeze:!row.freeze
            }).then((response) => {
              let res = response.data;
              if (res.status == "0") {

                this.getGoodsList();
              }
            })
          },
        delUser(int,row){
          axios.post("/users/delUser", {
            id:row._id,
          }).then((response) => {
            let res = response.data;
            if (res.status == "0") {
              this.getGoodsList();
            }
          })
        },
        getOneUser(){
          axios.post("/users/getOneUser", {
            userName:this.input,
          }).then((response) => {
            let res = response.data;
            if (res.status == "0") {
              this.tableData = res.result.list;
            }
          })
        },
        handleEdit(index , row){
          this.edituserVisible = true;
           console.log(row)
          this.editForm.id=row._id;
          this.editForm.account = row.userName;
          this.editForm.pwd = row.userPwd;
          this.editForm.authority = row.authority;
        },
        edituser(){
          axios.post("/users/editUser", {
            id:this.editForm.id,
            username: this.editForm.account,
            password: this.editForm.pwd,
            authority:this.editForm.authority,
          }).then((response) => {
            let res = response.data;
            if (res.status == "0") {
              this.getGoodsList();
              this.edituserVisible = false;
            }else {
              this.message =  res.msg;
              this.open()
            }
          })
        }
      }
  }
</script>

<style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    margin-top: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
  }
</style>

